<template>
  <div class="h-[calc(100vh-120px)]">
    <el-tabs tab-position="left">
      <el-tab-pane>
        <template #label>
          <span class="text-lg font-bold w-1/2 m-10">
            系统设置
          </span>
        </template>
        <div class="flex-row overflow-auto h-[calc(100vh-130px)] rounded-lg border-solid border border-black-100 mr-5 ml-5">
          <div class="flex items-center justify-between h-10 mt-5 w-full p-3 hover:bg-gray-200 cursor-pointer pr-5 pl-5">
            <el-text class="text-lg font-bold" size="large">开机自启</el-text>
            <el-switch v-model="app_config.auto_launch" size="large" class="ml-auto" />
          </div>
          <div class="flex items-center justify-between h-10 mt-5 w-full p-3 hover:bg-gray-200 cursor-pointer pr-5 pl-5">
            <el-text class="text-lg font-bold" size="large">静默启动</el-text>
            <el-switch v-model="app_config.silent_launch" size="large" class="ml-auto" />
          </div>
          <div class="flex items-center justify-between h-10 mt-5 w-full p-3 hover:bg-gray-200 cursor-pointer pr-5 pl-5">
            <el-text class="text-lg font-bold" size="large">主题模式</el-text>
            <el-select v-model="app_config.theme" size="large" style="width: 120px">
              <el-option v-for="item in theme_options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="flex items-center justify-between h-10 mt-5 w-full p-3 hover:bg-gray-200 cursor-pointer pr-5 pl-5">
            <el-text class="text-lg font-bold" size="large">语言设置</el-text>
            <el-select v-model="app_config.language" size="large" style="width: 120px">
              <el-option v-for="item in language_options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="flex items-center justify-between h-10 mt-5 w-full p-3 hover:bg-gray-200 cursor-pointer pr-5 pl-5">
            <el-text class="text-lg font-bold" size="large">日志使能</el-text>
            <el-checkbox-group v-model="app_config.log_list" class="flex mt-3">
              <el-checkbox label="Info" value="Info" size="large" class="mr-2" />
              <el-checkbox label="Warn" value="Warn" size="large" class="mr-2" />
              <el-checkbox label="Debug" value="Debug" size="large" class="mr-2" />
              <el-checkbox label="Error" value="Error" size="large" class="mr-2" />
            </el-checkbox-group>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <template #label>
          <span class="text-lg font-bold w-1/2 m-10">
            工作设置
          </span>
        </template>
        <div class="flex-row overflow-auto h-[calc(100vh-130px)] rounded-lg border-solid border border-black-100 mr-5 ml-5">
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { invoke } from '@tauri-apps/api/tauri'

interface AppConfig {
  auto_launch: boolean;
  silent_launch: boolean;
  language: string;
  theme: string;
  log_list: Array<string>;
}

const app_config = ref<AppConfig>({
  auto_launch: false,
  silent_launch: false,
  language: 'zh',
  theme: 'light',
  log_list: []
});

const language_options = [
  {
    value: 'zh',
    label: '中文',
  },
  {
    value: 'en',
    label: 'English',
  },
  {
    value: 'ru',
    label: 'Русский',
  }
]

const theme_options = [
  {
    value: 'light',
    label: '浅色',
  },
  {
    value: 'dark',
    label: '深色',
  },
  {
    value: 'auto',
    label: '系统',
  }
]

async function get_app_conf() {
  await invoke("get_app_conf_cmd")
    .then((res) => {
      app_config.value = res as AppConfig;
    })
    .catch((e) => console.error(e))
}

watch(app_config, async (newValue, oldValue) => {
  console.log('app_config changed:', newValue, 'oldValue:', oldValue);
  
  if (oldValue === undefined) {
    const autoLaunchResult = await invoke("set_autolaunch_cmd", { enable: newValue.auto_launch });
    console.log('设置开机自启结果:', autoLaunchResult);
    return;
  }

  try {
    const autoLaunchResult = await invoke("set_autolaunch_cmd", { enable: newValue.auto_launch });
    console.log('设置开机自启结果:', autoLaunchResult);
  } catch (error) {
    console.error('设置开机自启时发生错误:', error);
  }

  // 检查其他配置项是否有变化，然后更新
  try {
    const setAppConfResult = await invoke("set_app_conf_cmd", { appConf: app_config.value });
    console.log('应用配置更新结果:', setAppConfResult);
  } catch (error) {
    console.error('更新应用配置时发生错误:', error);
  }
}, { deep: true, immediate: false});

onMounted(async () => {
  get_app_conf();
});
</script>

<style scoped>
</style>
